<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器-花生皮编程</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .el-header,.el-footer {
        background-color: #0a0a0a;
        color: #fff;
        text-align: center;
        line-height: 60px;
    }
    .el-main {
        min-width: 500px;
        background-color: #0a0a0a;
        text-align: center;
        line-height: 55px;
    }
    .el-button {
        width: 100px;
    }
    .clearfix {
        width: 430px;
        text-align: right;
        margin: 0 auto;
        font-size: 50px;
        font-weight: bold;
        min-height: 110px;
        display: flex;
        flex-direction: column-reverse;
    }
    .clearfix span {
        word-break: normal;
        width: auto;
        display: block;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow: hidden;
    }
    a {
        color:white
    }

</style>

<body bgcolor="#0a0a0a">
<div id="calculator">
    <el-container>
        <el-header>计算器-花生皮编程</el-header>
        <el-main @@keyup=>
            <el-card class="box-card" style="width: 500px; margin: 0 auto;">
                <div slot="header" class="clearfix">
                    <span>{{resultMsg}}</span>
                </div>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-button type="danger" @click="mathAction('clear')">清空</el-button>
                        <el-button type="info" @click="mathAction('del')">回退</el-button>
                        <el-button type="info" @click="mathAction('percentage')">%</el-button>
                        <el-button type="info" @click="mathAction('div')">÷</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-button type="primary" @click='numBtn(7)'>7</el-button>
                        <el-button type="primary" @click='numBtn(8)'>8</el-button>
                        <el-button type="primary" @click='numBtn(9)'>9</el-button>
                        <el-button type="info" @click="mathAction('mult')">x</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-button type="primary" @click='numBtn(4)'>4</el-button>
                        <el-button type="primary" @click='numBtn(5)'>5</el-button>
                        <el-button type="primary" @click='numBtn(6)'>6</el-button>
                        <el-button type="info" @click="mathAction('min')">-</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-button type="primary" @click='numBtn(1)'>1</el-button>
                        <el-button type="primary" @click='numBtn(2)'>2</el-button>
                        <el-button type="primary" @click='numBtn(3)'>3</el-button>
                        <el-button type="info" @click="mathAction('add')">+</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-button type="primary" @click='numBtn(0)' style="width: 215px;">0</el-button>
                        <el-button type="primary" @click='numBtn(".")'>.</el-button>
                        <el-button type="warning" @click="mathAction('equal')">=</el-button>
                    </el-col>
                </el-row>

            </el-card>

        </el-main>
        <el-footer><a href="https://juejin.cn/post/7002792005688360968/">点击了解更多...</a></el-footer>
    </el-container>
</div>
</body>
<script>
    var app = new Vue({
        el: '#calculator',
        data: {
            enterMathFlag: false,
            resultMsg: '', //计算器显示
            firstNum: '', //计算方式的前参  后参  
            lastNum: '', //计算方式的前参  后参  
            mathStart: false, //计算开始结束标识
            mathfun: '', //计算方式标识
        },

        created() {
            var _this = this;
            document.addEventListener("keydown", _this.watchKeydown);
        },

        methods: {
            watchKeydown(e) {
                let _this = this
                let keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
                _this.btnSwitch(keyNum)
            },
            numBtn(val) {
                let _this = this
                _this.playAudio()

                if (_this.enterMathFlag && !_this.mathStart) {
                    _this.enterMathFlag = false
                    _this.resetCalculation()
                }

                if (_this.mathfun == "div" && _this.lastNum == '' && val == 0) {
                    return
                }

                if (_this.mathStart) {

                    if (_this.lastNum.indexOf(".") > 0 && val == ".") {
                        return
                    }

                    if (_this.lastNum.length > 11) {
                        return
                    }

                    if (_this.lastNum == '0' && val == '0') {
                        return
                    }

                    if (val == "." && _this.lastNum == "") {
                        val = "0."
                    }

                    _this.lastNum += val

                } else {

                    if (_this.firstNum.indexOf(".") > 0 && val == ".") {
                        return
                    }

                    if (_this.firstNum.length > 11) {
                        return
                    }

                    if (_this.firstNum == "0" && val == '0') {
                        return
                    }

                    if (val == "." && _this.firstNum == "") {
                        val = "0."
                    }
                    _this.firstNum += val
                }

                _this.resultMsg += val
            },

            mathAction(val) {
                let _this = this
                _this.playAudio()
                if (val == "clear") {
                    _this.enterMathFlag = false
                    _this.resetCalculation()
                }

                if (_this.firstNum == "") {
                    return
                }

                switch (val) {
                    case "del":
                        if (_this.mathStart) {
                            if (_this.lastNum !== "") {
                                _this.lastNum = _this.DeleteLastCharacter(_this.lastNum)
                            } else {
                                _this.mathfun = ""
                                _this.mathStart = false
                            }
                        } else {
                            _this.firstNum = _this.DeleteLastCharacter(_this.firstNum)
                        }
                        _this.resultMsg = _this.DeleteLastCharacter(_this.resultMsg);
                        break
                    case "percentage":
                        _this.resultMsg = parseFloat(((parseFloat(_this.firstNum) / 100 * 1).toFixed(10) + '').replace(/(0+)$/g, "")) + "";
                        _this.firstNum = _this.resultMsg
                        _this.lastNum = ''
                        _this.mathfun = ""
                        break

                    case "add":
                        _this.restorePreconditions(function() {
                            _this.resultMsg += "+"
                            _this.mathfun = "add"
                        })
                        break;
                    case "min":
                        _this.restorePreconditions(function() {
                            _this.resultMsg += "-"
                            _this.mathfun = "min"
                        })
                        break;
                    case "mult":
                        _this.restorePreconditions(function() {
                            _this.resultMsg += "×"
                            _this.mathfun = "mult"
                        })
                        break;
                    case "div":
                        _this.restorePreconditions(function() {
                            _this.resultMsg += "÷"
                            _this.mathfun = "div"
                        })
                        break;
                    case "equal":
                        _this.equal(_this.mathfun)
                        break
                }
            },


            /**
             * 用户行为 /等于/加/减/乘/除
             */
            equal(key) {
                let _this = this
                if (_this.lastNum == "") {
                    _this.laseNum = "1"
                    _this.mathStart = false
                    _this.resultMsg = parseFloat(
                        (parseFloat(_this.firstNum) * 1).toFixed(10) + ''
                    ) + '';
                    _this.firstNum = _this.resultMsg
                    _this.lastNum = ''
                    _this.mathfun = ""
                    return
                }
                switch (key) {
                    case 'add':
                        _this.mathStart = false
                        _this.resultMsg = parseFloat(
                            (parseFloat(_this.firstNum) + parseFloat(_this.lastNum)).toFixed(10)
                        ) + '';
                        _this.CheckResultMaxLength(_this.resultMsg)
                        break;

                    case "min":
                        _this.mathStart = false
                        _this.resultMsg = parseFloat(
                            (parseFloat(_this.firstNum) - parseFloat(_this.lastNum)).toFixed(10)
                        ) + '';
                        _this.CheckResultMaxLength(_this.resultMsg)
                        break;

                    case "mult":
                        _this.mathStart = false
                        _this.resultMsg = parseFloat(
                            (parseFloat(_this.firstNum) * parseFloat(_this.lastNum)).toFixed(10)
                        ) + '';
                        _this.CheckResultMaxLength(_this.resultMsg)

                        break;

                    case "div":
                        if (parseFloat(_this.lastNum) == 0) {
                            return
                        }
                        _this.mathStart = false
                        _this.resultMsg = parseFloat((parseFloat(_this.firstNum) / parseFloat(_this.lastNum)).toFixed(10)) + '';
                        _this.CheckResultMaxLength(_this.resultMsg)
                        break;
                }

            },
            /**
             * 检查最大位数显示
             */
            CheckResultMaxLength(result) {
                let _this = this
                _this.firstNum = result
                _this.lastNum = ''
                _this.mathfun = ""
            },
            // --------------------------------------------------------------------------------------------------------------------------
            /**
             * 删除最后一位字符
             */
            DeleteLastCharacter(value) {
                return value.substr(0, value.length - 1);
            },
            // --------------------------------------------------------------------------------------------------------------------------
            /**
             * 重置计算
             */
            resetCalculation() {
                let _this = this
                _this.mathStart = false
                _this.resultMsg = ''
                _this.firstNum = ''
                _this.lastNum = ''
                _this.mathfun = ""
            },
            /**
             * 整理上一次的结果/优化显示效果
             */
            restorePreconditions(callback) {
                let _this = this
                _this.firstNum = parseFloat(_this.firstNum) + ''
                _this.resultMsg = _this.firstNum
                if (_this.mathfun) {
                    _this.equal(_this.mathfun)
                }
                _this.mathStart = true

                if (_this.mathfun !== "") {
                    return
                }
                callback()
            },
            playAudio() {
                let audio = new Audio()
                audio.src = "audio.mp3"
                audio.play();
            },
            btnSwitch(ketNum) {
                let _this = this
                switch (ketNum) {
                    case 8:
                        _this.mathAction('del')
                        break
                    case 13:
                        _this.mathAction('equal')
                        break
                    case 27:
                        _this.mathAction('clear')
                        break
                    case 53:
                        _this.mathAction('percentage')
                        break
                    case 96:
                        _this.numBtn(0)
                        break
                    case 97:
                        _this.numBtn(1)
                        break
                    case 98:
                        _this.numBtn(2)
                        break
                    case 99:
                        _this.numBtn(3)
                        break
                    case 100:
                        _this.numBtn(4)
                        break
                    case 101:
                        _this.numBtn(5)
                        break
                    case 102:
                        _this.numBtn(6)
                        break
                    case 103:
                        _this.numBtn(7)
                        break
                    case 104:
                        _this.numBtn(8)
                        break
                    case 105:
                        _this.numBtn(9)
                        break
                    case 110:
                        _this.numBtn('.')
                        break
                    case 107:
                        _this.mathAction('add')
                        break

                    case 109:
                        _this.mathAction('min')
                        break
                    case 106:
                        _this.mathAction('mult')
                        break
                    case 111:
                        _this.mathAction('div')
                        break
                }
            }
        }
    })



</script>

</html>